<template>
	<el-table-column label="操作" width="120px" fixed="right">
		<template #default="scope">
			<el-button icon="ele-Edit" size="small" text type="primary" @click="show(scope.row)"
				v-if="editTitle != undefined">
				{{ editTitle }}
			</el-button>
			<el-popover placement="bottom" v-if="isMore">
				<template #reference>
					<el-button icon="ele-More" size="small" text type="primary"> </el-button>
				</template>
				<div class="more-button" style="display: block;">
					<el-button v-if="!isDelete" icon="ele-Delete" size="small" text type="danger"
						@click="onDelete(scope.row)">删除</el-button>
					<slot :row="scope.row" :column="scope.column"></slot>
				</div>
			</el-popover>
		</template>
	</el-table-column>
</template>
<script lang="ts" setup>
// 表格里面的操作列, 只有详情和删除按钮时默认统一使用
import { useConfirmDialog } from '/@/hooks/useConfirmDialog'
import { clog, isNull } from '/@/utils/index'

defineOptions({
	name: 'MkColumnOption'
})

//定义公共参数
const props = defineProps({
	isMore: {
		type: Boolean,
		default: true,
	},
	isDelete: {
		type: Boolean,
		default: false,
	},
	editTitle: {
		type: String,
		default: '查看'
	},
	deleteShowFile: {
		type: String,
		default: ''
	}
})

const emit = defineEmits(['show', 'delete'])

const show = (row: any) => {
	emit('show', row)
}

const onDelete = (row: any) => {
	let title = `确认删除吗?`;
	// 打开删除确认弹窗
	if (!isNull(props.deleteShowFile)) {
		title = `确认删除 ${row[props.deleteShowFile]} 吗?`
	}
	useConfirmDialog(title).then(async () => {
		emit('delete', row)
	})
}

/** 使用举例
<MkColumnOption @show="show" @delete="del" deleteShowFile="title">
	<template #default="{ row }">
		<div>
			<el-button icon="ele-View" size="small" text type="primary"
				@click="openResourcePreview(row)"> 预览
			</el-button>
			<el-button v-if="isPreviewFile" icon="ele-Download" size="small" text type="primary"
				@click="downloadFile(row)">
				下载
			</el-button>
		</div>
	</template>
</MkColumnOption>
 */
</script>

<style lang="scss" scoped>
.more-button {
	button {
		margin-left: 0px !important;
	}

	:deep(.el-button+.el-button) {
		margin-left: 0px !important;
	}
}
</style>
